<template>
    <div class="wrapper">
        <!-- header部分 -->
        <header>
            <p>确认订单</p>
        </header>
        <!-- 订单信息部分 -->
        <div class="order-info">
            <h5>订单配送至：</h5>
            <div class="order-info-address" @click="toUserAddress">
                <p>{{deliveryaddress!=null?(deliveryaddress.detail || deliveryaddress.address):'请选择送货地址'}}</p>
                <i class="fa fa-angle-right"></i>
            </div>
            <p>{{user.userName}}{{user.userSex==1?'先生':'女士'}} {{user.userId}}</p>
        </div>

        <h3>{{businessName }}</h3>
        <!-- 订单明细部分 -->
        <ul class="order-detailed">
            <li v-for="(item, idx) in cartArr" :key="item.food?.id || idx">
                <div class="order-detailed-left">
                    <img :src="item.food.foodImg">
                    <p>{{item.food.foodName}} x {{item.quantity}}</p>
                </div>
                <p>&#165;{{(item.food.foodPrice*item.quantity).toFixed(2)}}</p>
            </li>
        </ul>
        <div class="order-deliveryfee">
            <p>配送费</p>
            <p>&#165;{{Number(lockedDeliveryFee || 0).toFixed(2)}}</p>
        </div>
        <!-- 合计部分 -->
        <div class="total">
            <div class="total-left">
                &#165;{{Number(totalPrice).toFixed(2)}}
            </div>
            <div class="total-right" @click="toPayment">
                去支付
            </div>
        </div>
    </div>
</template>
<script>
    import { createOrder } from '../api/order';

    export default {
        name: 'Orders',
        data() {
            return {
                businessId: this.$route.query.businessId,
                lockedDeliveryFee: Number(this.$route.query.deliveryFee || 0),
                businessName:'',
                user: {},
                cartArr: [],
                deliveryaddress: {}
            }
        },
        created() {
            this.user = this.$getSessionStorage('user');
            this.businessName = this.$getSessionStorage('business').businessName;
            this.deliveryaddress = this.$getLocalStorage(this.user.userId);
            // 读取本地持久化的配送费作为锁定值
            const feeKey = `deliveryPrice`;
            const lockedFee = this.$getLocalStorage(feeKey);
            if (lockedFee != null && lockedFee !== '') {
                this.lockedDeliveryFee = Number(lockedFee);
            }
            // 读取从商家页带过来的本地购物车
            const key = `cart_${this.user.id || this.user.userId}_${this.businessId}`;
            const localCart = this.$getLocalStorage(key) || [];
            if (localCart && localCart.length > 0) {
                this.cartArr = localCart;
            }
            //查询当前商家
            this.$axios.post('BusinessController/getBusinessById', this.$qs.stringify({
                businessId: this.businessId
            })).then(response => {
                this.business = response.data;
            }).catch(error => {
                console.error(error);
            });

            // 若本地无缓存，则回退到服务端查询
            if (!this.cartArr || this.cartArr.length === 0) {
                this.$axios.post('CartController/listCart', this.$qs.stringify({
                    userId: this.user.userId,
                    businessId: this.businessId
                })).then(response => {
                    this.cartArr = response.data;
                }).catch(error => {
                    console.error(error);
                });
            }
        },
        computed: {
            totalPrice() {
                let totalPrice = 0;
                for (let cartItem of this.cartArr) {
                    totalPrice += cartItem.food.foodPrice * cartItem.quantity;
                }
                // 使用固定的配送费（来自商家页），不随地址变更
                totalPrice += Number(this.lockedDeliveryFee || 0);
                return totalPrice;
            }
        },

        methods: {
            toUserAddress() {
                // 确保路径正确
                this.$router.push({
                    path: '/userAddress', // 确认路径正确
                    name: 'UserAddress',  // 可以使用名称导航
                    query: { businessId: this.businessId }
                });
            },
            toPayment() {
                if (this.deliveryaddress == null) {
                    alert('请选择送货地址！');
                    return;
                }

                // 计算订单总数量
                let totalQuantity = 0;
                for (let cartItem of this.cartArr) {
                    totalQuantity += cartItem.quantity;
                }
                // 创建订单名称
                const orderName = this.businessName;

                // 创建订单（兼容新老地址字段，优先 id 其次 daId）
                const addressId = this.deliveryaddress.id || this.deliveryaddress.daId;

                // 使用新的API保存订单数据
                createOrder({
                    userId: this.user.userId,
                    name: orderName,
                    totalPrice: this.totalPrice,
                    userId: this.user.id,
                    status: 1, // 待付款状态
                    quantity: totalQuantity
                }).then(response => {
                    let orderId = response.data;
                    if (response.data.code == 200) {
                        alert('创建完成！');
                         this.$router.push(  '/orderList');

                        // this.$router.push({ path: '/payment', query: { orderId: orderId } });
                    } else {
                        alert('创建订单失败！');
                    }
                }).catch(error => {
                    console.error(error);
                    alert('创建订单失败，请稍后重试！');
                });
            }
        }
    }
</script>
<style scoped>
    /****************** 总容器 ******************/
    .wrapper {
        width: 100%;
        height: 100%;
    }

    /****************** header部分 ******************/
    .wrapper header {
        width: 100%;
        height: 12vw;
        background-color: #0097FF;
        color: #fff;
        font-size: 4.8vw;
        position: fixed;
        left: 0;
        top: 0;
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    /****************** 订单信息部分 ******************/
    .wrapper .order-info {
        /*注意这里，不设置高，靠内容撑开。因为地址有可能折行*/
        width: 100%;
        margin-top: 12vw;
        background-color: #0097EF;
        box-sizing: border-box;
        padding: 2vw;
        color: #fff;
    }

    .wrapper .order-info h5 {
        font-size: 3vw;
        font-weight: 300;
    }

    .wrapper .order-info .order-info-address {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 700;
        user-select: none;
        cursor: pointer;
        margin: 1vw 0;
    }

    .wrapper .order-info .order-info-address p {
        width: 90%;
        font-size: 5vw;
    }

    .wrapper .order-info .order-info-address i {
        font-size: 6vw;
    }

    .wrapper .order-info p {
        font-size: 3vw;
    }

    .wrapper h3 {
        box-sizing: border-box;
        padding: 3vw;
        font-size: 4vw;
        color: #666;
        border-bottom: solid 1px #DDD;
    }

    /****************** 订单明细部分 ******************/
    .wrapper .order-detailed {
        width: 100%;
    }

    .wrapper .order-detailed li {
        width: 100%;
        height: 16vw;
        box-sizing: border-box;
        padding: 3vw;
        color: #666;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .wrapper .order-detailed li .order-detailed-left {
        display: flex;
        align-items: center;
    }

    .wrapper .order-detailed li .order-detailed-left img {
        width: 10vw;
        height: 10vw;
    }

    .wrapper .order-detailed li .order-detailed-left p {
        font-size: 3.5vw;
        margin-left: 3vw;
    }

    .wrapper .order-detailed li p {
        font-size: 3.5vw;
    }

    .wrapper .order-deliveryfee {
        width: 100%;
        height: 16vw;
        box-sizing: border-box;
        padding: 3vw;
        color: #666;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 3.5vw;
    }

    /****************** 订单合计部分 ******************/
    .wrapper .total {
        width: 100%;
        height: 14vw;
        position: fixed;
        left: 0;
        bottom: 0;
        display: flex;
    }

    .wrapper .total .total-left {
        flex: 2;
        background-color: #505051;
        color: #fff;
        font-size: 4.5vw;
        font-weight: 700;
        user-select: none;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .wrapper .total .total-right {
        flex: 1;
        background-color: #38CA73;
        color: #fff;
        font-size: 4.5vw;
        font-weight: 700;
        user-select: none;
        cursor: pointer;
        display: flex;
        justify-content: center;
        align-items: center;
    }
</style>